<template>
    <view>
        <nav-bar ref="navBar" backState="2000" type="transparentFixed" :titleCenter="false" bgColor="themeBgColor"
            transparentFixedFontColor="#FFF" fontColor="#FFF" :shadow="false">
            <view class="search_message_box">
                <view class="search_box" @click="onPageJump('/pages/home/search')">搜索</view>
                <!-- <view class="icon_message" @click="onPageTokenJump('/pages/message/message')"></view> -->
            </view>
            <view class="search_message_box" slot="transparentFixed">
                <view class="search_box" @click="onPageJump('/pages/home/search')">搜索</view>
                <!-- <view class="icon_message" @click="onPageTokenJump('/pages/message/message')"></view> -->
            </view>
        </nav-bar>
        <!-- 公共组件-每个页面必须引入 -->
        <public-module></public-module>
        <mescroll-body ref="mescrollRef" @init="mescrollInit" :down="downOption" :up="upOption" @down="downCallback" @up="upCallback">
            <!-- <view class="label_box">
                <text v-for="(item,index) of recommendLabelList" :key="item.objId" @click="onPageJump('/pages/home/recommendGoodsList?objId='+item.objId+'&name='+item.title)">{{item.title}}</text>
            </view> -->
            <view class="bg_image_box" :style="{ paddingTop: statusBarHeight + 'px' }">
                <!-- banner -->
                <view class="banner_swiper_box">
                    <swiper class="banner_swiper" :autoplay="true" :interval="3000" circular :duration="1000" @change="onSwiperChange">
                        <swiper-item v-for="(item, index) of bannerList" :key="index">
                            <view class="banner_img" :class="{ active: swiperIndex == index }">
                                <image :src="item.imgUrl" mode="aspectFill" @click="onBanner(item)"></image>
                            </view>
                        </swiper-item>
                    </swiper>
                    <view class="swiper_pages">
                        {{ swiperIndex + 1 }}
                        <text>/</text>
                        {{ bannerList.length }}
                    </view>
                </view>
                <!-- 导航栏 -->
                <view class="menu_swiper">
                    <view class="nav_box">
                        <view class="navs" v-for="(item, index) of menuList" :key="index" @click="onPageJump('/pages/home/shop/goodsList?typeId=' + item.objId + '&title=' + item.name)">
                            <image :src="item.iconUrl" mode="aspectFill"></image>
                            <text>{{ item.name }}</text>
                        </view>
                    </view>
                </view>
                <!-- 资讯 -->
                <view class="news_box">
                    <image @click="onPageJump('/pages/news/newsList')" src="../../static/icon/theme/img_news.png" mode="aspectFit"></image>
                    <view class="line"></view>
                    <swiper class="news_swiper" vertical circular :autoplay="true" :interval="3000" :duration="1000">
                        <swiper-item v-for="(item, index) of newsList" :key="item.objId" @click="onNews(item)">
                            <view class="news_title">{{ item.title }}</view>
                        </swiper-item>
                    </swiper>
                </view>
            </view>
            <!-- 砍价模块 -->
            <view class="bargain_box" v-if="module.bargain">
                <view class="bargain_title">
                    <view>限时砍价</view>
                    <text>享最低价下单</text>
                </view>
                <bargain-goods-item v-for="(item,index) of bargainList" :key="index" :item="item" :index="index"></bargain-goods-item>
                <!-- <view class="bargain_bottom_box">
                    <view class="bg">
                        <button @click="onPageJump('/pages/home/bargainList')">查看更多 ></button>
                    </view>
                    <view class="qcclude"></view>
                </view> -->
                <view class="more_goods"><button @click="onPageJump('/pages/bargain/bargainList')">查看更多 ></button></view>
            </view>
                
            <!-- 活动导航 -->
            <view class="activity_nav_box">
                <view :class="{ active: activityType == 1000 }" @click="activityType = 1000">
                    <view>超值秒杀</view>
                    <text>全场低至3折</text>
                </view>
                <text class="line">|</text>
                <view :class="{ active: activityType == 2000 }" @click="activityType = 2000">
                    <view>精品拼团</view>
                    <text>一起购更划算</text>
                </view>
                <text v-if="module.integralMall" class="line">|</text>
                <view v-if="module.integralMall" :class="{ active: activityType == 3000 }" @click="activityType = 3000">
                    <view>积分兑换</view>
                    <text>免费换福利</text>
                </view>
            </view>
            <!-- 秒杀 -->
            <view class="goods_box" v-if="activityType == 1000">
                <spike-goods-item v-for="(item, index) of spikeList" :key="item.objId" :item="item" :index="index"></spike-goods-item>
                <view class="more_goods"><button @click="onPageJump('/pages/home/spikeList')">查看更多 ></button></view>
            </view>
            <!-- 拼团 -->
            <view class="goods_box" v-if="activityType == 2000">
                <fight-goods-item v-for="(item, index) of fightList" :key="item.objId" :item="item" :index="index"></fight-goods-item>
                <view class="more_goods"><button @click="onPageJump('/pages/home/fightList')">查看更多 ></button></view>
            </view>
            <!-- 积分-->
            <view v-if="module.integralMall && activityType == 3000">
                <home-integral-goods-item v-for="(item, index) of integralList" :key="item.objId" :item="item" :index="index"></home-integral-goods-item>
                <view class="more_goods"><button @click="onPageJump('/pages/integral/integralMall')">查看更多 ></button></view>
            </view>
            
            <!-- 优惠券 -->
            <view class="coupon_swiper_box">
                <swiper :autoplay="true" :interval="3000" :duration="600" @change="onCouponSwiperChange">
                    <swiper-item class="activity_entrance" v-for="(item,index) of voucherList" :key="index">
                        <image :src="item.img" mode="aspectFill" @click="onCollarCoupon(item)"></image>
                    </swiper-item>
                </swiper>
                <view class="point">
                    <text v-for="(item, index) of voucherList" :class="{active : couponSwiperIndex == index}" :key="index"></text>
                </view>
            </view>
          
          
            <!-- 活动 -->
            <view class="activity_box">
                <view>
                    <view class="activity_item" v-for="(item, index) of recommendList" :key="index">
                        <view class="activity_title">{{ item.title }}</view>
                        <view class="activity_prompt" :class="['color' + (index + 1)]">{{ item.subTitle }}</view>
                        <view class="goods_box">
                            <view class="goods_box" @click="onPageJump('/pages/home/shop/recommendList?objId=' + item.objId + '&title=' + item.title)">
                                <image v-for="(childItem, childIndex) of item.adImg" :key="childIndex" :src="childItem"
                                    mode="aspectFill"></image>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
            
            <!-- 商品类型筛选 -->
            <view class="goods_type_box">
                <goods-type-select @change="goodsTypeChange"></goods-type-select>
            </view>
            <!-- 商品排序 -->
            <view class="goods_sort_box">
                <view :class="{ active: sortType == 3000 }" @click="onSortType(3000)">智能排序</view>
                <view :class="{ active: sortType == 3002 }" @click="onSortType(3002)">好评优先</view>
                <view :class="{ active: sortType == 3001 }" @click="onSortType(3001)">低价优先</view>
                <view :class="{ active: sortType == 3003 }" @click="onSortType(3003)">销量优先</view>
            </view>
            <waterfall-goods ref="waterfall" :list="goodsDataList"></waterfall-goods>
        </mescroll-body>
        <view class="video_box" v-if="videoShow" @click="onCloseVideo"><video :src="videoUrl" autoplay="true" controls></video></view>
        <!-- 优惠券弹框 -->
        <view class="bullet_mask" v-if="bulletShow" @click="bulletShow = false">
            <image :src="bulletInfo.img" @click.stop="onCollarCouponByPopup" mode="widthFix"></image>
        </view>
        <attention-public v-model="showPopup" :showBtn="true"></attention-public>
    </view>
</template>

<script>
    import spikeGoodsItem from '@/components/module/spike_goods_item';
    import fightGoodsItem from '@/components/module/fight_goods_item';
    import bargainGoodsItem from '@/pages/bargain/components/bargain_goods_item';
    import homeIntegralGoodsItem from '@/components/module/home_integral_goods_item';
    import waterfallGoods from '@/components/module/waterfall_goods';
    import goodsTypeSelect from '@/components/module/goods_type_select';
    import attentionPublic from '@/components/module/attention_public';
    import {
        mapState,
        mapMutations
    } from 'vuex';
    // #ifdef MP-WEIXIN
    import {
        onLogin
    } from '@/config/login';
    // #endif
import MescrollMixin from "@/components/common/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin], // 使用mixin (在main.js注册全局组件)
        components: {
            spikeGoodsItem,
            fightGoodsItem,
            homeIntegralGoodsItem,
            bargainGoodsItem,
            waterfallGoods,
            goodsTypeSelect,
            attentionPublic
        },
        data() {
            return {
                statusBarHeight: 0,
                videoUrl: '',
                videoShow: false,
                swiperIndex: 0,
                couponSwiperIndex: 0,
                bannerList: [],
                sortType: 3000,
                menuList: [],
                newsList: [],
                activityType: 1000,
                goodsDataList: [],
                downOption: {
                	auto: false //是否在初始化后,自动执行downCallback; 默认true
                },
                upOption: {
                    auto: false,//是否在初始化后,自动执行downCallback; 默认true,
                    toTop: {
                        src: ""
                    }
                },
                voucherList: [],
                bulletShow: false,
                bulletInfo: {},
                showPopup: false,
                recommendList: [],
                spikeList: [],
                fightList: [],
                integralList: [],
                bargainList: [],
                loadimg: false,
                module:{}
            };
        },
        computed: {
            ...mapState(['userInfo'])
        },
        //第一次加载
        onLoad(e) {
            this.module = this.$base.module;
            //获取手机状态栏高度
            this.statusBarHeight = uni.getSystemInfoSync()['statusBarHeight'];
            // #ifdef MP-WEIXIN
            onLogin('try', () => {
                this.getCoupon();
            });
            // #endif
            this.pageData();
            // #ifdef H5
            let recommendCode = uni.getStorageSync('recommendCode');
            if (recommendCode) {
                this.showPopup = true;
            }
            // #endif
        },
        //页面显示
        onShow() {
            if (this.userInfo.token) {
                this.getCoupon();
            }
        },
        //方法
        methods: {
            ...mapMutations(['setWebViewUrl']),
            pageData() {
                // 轮播图接口
                this.$http
                    .post('api/open/v1/lunbo', {
                        locatType: 1101
                    })
                    .then(res => {
                        this.bannerList = res;
                    });
                this.$http
                    .post('api/article/v1/list', {
                        pageNo: 1,
                        pageSize: 10,
                        recommend: true
                    })
                    .then(res => {
                        this.newsList = res.data;
                    });
                this.$http.get('api/shopAd_category/v1/mall_list_data').then(res => {
                    this.recommendList = res;
                });
                // 菜单列表
                this.$http
                    .get('api/mall/goods/v1/type', {
                        type: 1401
                    })
                    .then(res => {
                        if (res.length > 10) {
                            this.menuList = res.splice(0, 10);
                        } else {
                            this.menuList = res;
                        }
                    });
                // 优惠卷
                this.$http.get('api/open/v1/discount_voucher_list').then(res => {
                    this.voucherList = res;
                });
                // 秒杀
                this.$http
                    .post('api/mall/goods/v1/spike_list', {
                        pageNo: 1,
                        pageSize: 2
                    })
                    .then(res => {
                        this.spikeList = res.data;
                    });
                // 拼团
                this.$http
                    .post('api/mall/goods/v1/pt_list', {
                        pageNo: 1,
                        pageSize: 2
                    })
                    .then(res => {
                        this.fightList = res.data;
                    });
                // 积分
                this.$http
                    .post('api/shop_integral/v1/list', {
                        pageNo: 1,
                        pageSize: 2
                    })
                    .then(res => {
                        this.integralList = res.data;
                    });
                // 砍价
                this.$http
                    .post('api/mall/goods/v1/cut_list', {
                        pageNo: 1,
                        pageSize: 2
                    })
                    .then(res => {
                        this.bargainList = res.data;
                    });
            },
            //领取优惠券
            onCollarCoupon(item) {
                this.judgeLogin(() => {
                    this.$http
                        .get('api/open/v1/receive_discount_voucher', {
                            objId: item.objId
                        })
                        .then(res => {
                            uni.showToast({
                                title: '领取成功,请到我的里面查看',
                                icon: 'none'
                            });
                        });
                });
            },

            //获取优惠券弹窗信息
            getCoupon() {
                this.$http.get('api/open/v1/bullet_box').then(res => {
                    if (res && res.voucherId) {
                        this.bulletShow = true;
                        this.bulletInfo = res;
                    }
                });
            },

            //领取弹框优惠券
            onCollarCouponByPopup() {
                this.$http
                    .get('api/open/v1/receive_discount_voucher', {
                        objId: this.bulletInfo.voucherId
                    })
                    .then(res => {
                        this.bulletShow = false;
                        uni.showToast({
                            title: '领取成功,请到我的里面查看',
                            icon: 'none'
                        });
                    });
            },
            // 轮播图变化
            onCouponSwiperChange(e) {
                this.couponSwiperIndex = e.detail.current;
            },
            onPageJump(url) {
                uni.navigateTo({
                    url: url
                });
            },
            onPageTokenJump(url) {
                this.judgeLogin(() => {
                    uni.navigateTo({
                        url: url
                    });
                });
            },
            // 轮播图点击
            onBanner(item) {
                if (item.jumpType == 1501) {
                    uni.navigateTo({
                        url: '/pages/home/shop/shop?objId=' + item.jumpRecord.id
                    });
                } else if (item.jumpType == 1502) {
                    uni.navigateTo({
                        url: '/pages/home/shop/goodsDetail?objId=' + item.jumpRecord.id
                    });
                } else if (item.jumpType == 1601) {
                    uni.navigateTo({
                        url: '/pagesMy/my/about'
                    });
                } else if (item.jumpType == 1201) {
                    this.setWebViewUrl(item.jumpRecord.webViewUrl);
                    uni.navigateTo({
                        url: '/pages/home/webView'
                    });
                } else if (item.jumpType == 1301) {
                    this.videoUrl = item.jumpRecord.videoUrl;
                    this.videoShow = true;
                }
            },
            // 排序选择
            onSortType(val) {
                this.sortType = val;
                this.mescroll.triggerDownScroll();
            },
            // 分类点击
            goodsTypeChange(val) {
                this.typeId = val.objId;
                this.mescroll.triggerDownScroll();
            },
            /*下拉刷新的回调 */
            downCallback() {
            	//联网加载数据
            	this.loadData(1);
            },
            /*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
            upCallback(page) {
            	//联网加载数据
            	this.loadData(page.num);
            },
            loadData(pageNo) {
                let httpData = {
                    pageNo: pageNo,
                    pageSize: 15,
                    sortType: this.sortType
                };
                if(this.typeId){
                	httpData.typeId = this.typeId;
                }
                this.$http
                	.post('api/mall/goods/v1/list', httpData,{
                		load:false
                	}).then(res => {
                		uni.stopPullDownRefresh();
                		//方法一(推荐): 后台接口有返回列表的总页数 totalPage
                		this.mescroll.endByPage(res.data.length, res.pages); //必传参数(当前页的数据个数, 总页数)
                		
                		if (pageNo == 1) {
                			this.goodsDataList = res.data;
                		} else {
                			this.goodsDataList = this.goodsDataList.concat(res.data);
                		}
                	}).catch(() => {
                		//联网失败, 结束加载
                		this.mescroll.endErr();
                	});
            },
            // 轮播图变化
            onSwiperChange(e) {
                this.swiperIndex = e.detail.current;
            },
            // 资讯选择
            onNews(item) {
                uni.navigateTo({
                    url: '/pages/news/newsDetails?objId=' + item.objId
                });
            }
        },
        //页面隐藏
        onHide() {},
        //页面卸载
        onUnload() {},
        onPageScroll(e) {
            this.$refs.navBar.pageScroll(e);
        },
        //用户点击分享
        onShareAppMessage(e) {
            return this.wxShare();
        }
    };
</script>
<style lang="scss" scoped>
    @import '@/style/mixin.scss';

    .bullet_mask {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 10;
        background-color: rgba(0, 0, 0, 0.5);
        display: flex;
        align-items: center;
        justify-content: center;

        image {
            width: 80%;
        }
    }

    .search_message_box {
        width: 690rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .search_box {
            flex: 1;
            height: 64rpx;
            background-color: rgba(255, 255, 255, 0.4);
            border-radius: 32rpx;
            font-size: 28rpx;
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0 40rpx;
            /* #ifdef MP */
            margin-right: 15rpx;

            /* #endif */
            &:before {
                content: '';
                @include bis('../../static/icon/ic_shop_search.png');
                width: 30rpx;
                height: 29rpx;
                margin-right: 20rpx;
            }
        }

        .icon_message {
            @include bis('../../static/icon/ic_message.png');
            width: 40rpx;
            height: 40rpx;
            margin-left: 20rpx;
            margin-right: 20rpx;
        }
    }

    .label_box {
        @include theme('gradient_bg');
        padding: 10rpx 30rpx 25rpx 30rpx;
        display: flex;
        flex-wrap: wrap;

        text {
            background-color: rgba(255, 255, 255, 0.4);
            height: 48rpx;
            border-radius: 8rpx;
            margin: 4rpx;
            font-size: 24rpx;
            color: #ffffff;
            line-height: 48rpx;
            padding: 0 16rpx;
        }
    }

    .video_box {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #000;
        display: flex;
        align-items: center;
        justify-content: center;

        video {
            width: 100%;
        }
    }

    .bg_image_box {
        @include theme("home_bg_image");
        background-position: center bottom;
        background-repeat: no-repeat;
        background-size: 100% auto;
    }

    .banner_swiper_box {
        position: relative;
        padding-top: 100rpx;

        .banner_swiper {
            height: 300rpx;
            position: relative;
            z-index: 2;

            swiper-item {
                box-sizing: border-box;
                display: flex;
                align-items: center;
                padding: 0 20rpx;

                .banner_img {
                    width: 100%;
                    height: 100%;

                    image {
                        width: 100%;
                        height: 100%;
                        box-shadow: 0rpx 20rpx 30rpx 0rpx rgba(0, 0, 0, 0.1);
                        border-radius: 20rpx;
                    }
                }
            }
        }

        .swiper_pages {
            position: absolute;
            bottom: 20rpx;
            right: 60rpx;
            height: 40rpx;
            background-color: rgba(0, 0, 0, 0.5);
            line-height: 40rpx;
            border-radius: 20rpx;
            color: #fff;
            font-size: 24rpx;
            padding: 0 20rpx;
            z-index: 2;

            text {
                margin: 0 6rpx;
            }
        }
    }

    .goods_type_box {
        margin-top: 20rpx;
    }

    .menu_swiper {
        padding: 10rpx 10rpx 20rpx 10rpx;
        background-color: #fff;
        margin: 24rpx 20rpx 0 20rpx;
        border-radius: 20rpx 20rpx 0 0;

        .nav_box {
            display: flex;
            flex-wrap: wrap;

            .navs {
                width: 20%;
                display: flex;
                flex-direction: column;
                align-items: center;
                padding: 20rpx 0;

                image {
                    width: 88rpx;
                    height: 88rpx;
                    border-radius: 50%;
                }

                text {
                    font-size: 24rpx;
                    color: #3d3d3d;
                    margin-top: 15rpx;
                    @include toe();
                    width: 100%;
                    text-align: center;
                }
            }
        }
    }

    .coupon_swiper_box {
        margin-top: 20rpx;
        position: relative;
        padding-bottom: 20px;
        swiper {
            height: 190rpx;
        }
        .activity_entrance {
            image {
                width: 100%;
                height: 190rpx;
            }
        }
        .point {
            position: absolute;
            bottom: 0rpx;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            text {
                width: 20rpx;
                height: 6rpx;
                background-color: #e5e5e5;
                border-radius: 3rpx;
                margin: 0 5rpx;
                &.active {
                    background-color: $themeColor;
                }
            }
        }
    }
    .news_box {
        background-color: #fff;
        padding: 30rpx;
        display: flex;
        align-items: center;

        image {
            width: 54rpx;
            height: 54rpx;
            flex-shrink: 0;
        }

        .line {
            width: 2rpx;
            height: 40rpx;
            background-color: #e5e5e5;
            margin: 0 30rpx;
        }

        .news_swiper {
            height: 40rpx;
            width: calc(100% - 94rpx);

            .news_title {
                font-size: 24rpx;
                color: #333333;
                width: 100%;
                @include toe();
            }
        }
    }

    .bargain_box {
        // background-image: linear-gradient(0deg, $viceColor 0%, #f7f7f7 100%);
        display: flex;
        flex-direction: column;
        align-items: center;

        .bargain_title {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 30rpx;

            view {
                font-family: HuXiaoBo-NanShen;
                font-size: 32rpx;
                color: #333333;
                font-weight: bold;
            }

            text {
                font-size: 24rpx;
                color: #ffffff;
                margin-top: 12rpx;
                width: 164rpx;
                height: 42rpx;
                background-color: $themeColor;
                border-radius: 4rpx;
                line-height: 42rpx;
                text-align: center;
            }
        }

        

        .bargain_bottom_box {
            position: relative;
            width: 100%;
            display: flex;
            justify-content: center;
            .bg {
                height: 86rpx;
                background-color: $themeColor;
                width: 680rpx;
                display: flex;
                justify-content: center;
                padding-top: 12rpx;
                button {
                    width: 184rpx;
                    height: 50rpx;
                    background-color: $themeColor;
                    border-radius: 28rpx;
                    font-size: 28rpx;
                    color:  #FFF;
                    line-height: 50rpx;
                    position: absolute;
                    z-index: 3;
                }
            }
            .qcclude {
                width: 100%;
                height: 70rpx;
                position: absolute;
                bottom: 0;
                left: 0;
                @include bis("../../static/icon/theme/bg_home_bargaining.png");
            }
        }
        .more_goods {
            padding-top: 30rpx;
        }
    }

    .activity_box {
        padding: 40rpx 20rpx;

        >view {
            background-color: #fff;
            display: flex;
            flex-wrap: wrap;
            padding-bottom: 20rpx;
            position: relative;

            &:before {
                content: '';
                position: absolute;
                left: 50%;
                top: 97rpx;
                bottom: 20rpx;
                width: 1rpx;
                background-color: #f3f3f3;
            }

            .activity_item {
                padding: 20rpx 30rpx 0 30rpx;
                width: 50%;

                .activity_title {
                    font-size: 32rpx;
                    color: #333333;
                    font-weight: bold;
                }

                .activity_prompt {
                    font-size: 24rpx;
                    margin-top: 10rpx;

                    &.color1 {
                        color: #74c355;
                    }

                    &.color2 {
                        color: #ffb33a;
                    }

                    &.color3 {
                        color: #ff3333;
                    }

                    &.color4 {
                        color: #da45e3;
                    }

                    &.color5 {
                        color: #3594ff;
                    }

                    &.color6 {
                        color: #613fdf;
                    }
                }

                .goods_box {
                    width: 100%;
                    display: flex;
                    margin-top: 12rpx;

                    >image {
                        flex: 1;
                        height: 176rpx;
                        border-radius: 8rpx;

                        &:nth-child(2) {
                            margin-left: 10rpx;
                        }
                    }

                    .goods_list {
                        width: 97rpx;
                        margin-left: 5rpx;

                        &:first-child {
                            margin-left: 0;
                        }

                        >image {
                            width: 97rpx;
                            height: 116rpx;
                            border-radius: 8rpx;
                        }

                        .store_price {
                            font-size: 18rpx;
                            color: #999999;
                            text-decoration: line-through;
                        }

                        .price {
                            font-size: 24rpx;
                            color: #ff4444;
                        }
                    }
                }
            }
        }
    }

    .goods_sort_box {
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: relative;
        width: 100%;
        font-size: 28rpx;
        background-color: #fff;

        >view {
            padding: 30rpx 0rpx;
            white-space: nowrap;
            color: #333333;
            opacity: 0.5;
            position: relative;
            flex: 1;
            text-align: center;

            &::before {
                content: '';
                position: absolute;
                top: 50%;
                width: 2rpx;
                right: 0;
                height: 24rpx;
                transform: translateY(-50%);
                background: #cccccc;
            }

            &:last-child::before {
                content: inherit;
                width: 0;
            }
        }

        .active {
            opacity: 1;
        }
    }

    .activity_nav_box {
        background-color: #fff;
        padding: 40rpx 0rpx 30rpx 0rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .line {
            color: #ccc;
        }

        >view {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;

            view {
                font-size: 32rpx;
                color: #333333;
            }

            text {
                font-size: 24rpx;
                color: #999999;
                height: 42rpx;
                border-radius: 4rpx;
                line-height: 42rpx;
                margin-top: 10rpx;
                padding: 0 10rpx;
            }

            &.active {
                view {
                    color: $themeColor;
                }

                text {
                    color: #ffffff;
                    @include theme('gradient_bg');
                }
            }
        }
    }

    .goods_box {
        padding-top: 20rpx;
    }
    .more_goods {
        padding: 10rpx 30rpx 30rpx 30rpx;
        display: flex;
        justify-content: center;
    
        button {
            width: 260rpx;
            height: 60rpx;
            @include theme('gradient_bg');
            font-size: 28rpx;
            color: #ffffff;
            line-height: 60rpx;
        }
    }
</style>
